import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const PRODUCTS = [
  {category:'ssss',price:'$1',stocked:true,name:'ball0'},
  {category:'ssss',price:'$1',stocked:true,name:'ball1'},
  {category:'ssss',price:'$1',stocked:false,name:'ball2'},

  {category:'aaa',price:'$2',stocked:true,name:'ww1'},
  {category:'aaa',price:'$12',stocked:false,name:'ww2'},
  {category:'aaa',price:'$2',stocked:true,name:'ww3'},
  {category:'aaa',price:'$2',stocked:true,name:'ww4'},
]

//FileterableProcuctTable
// -SearchBar //搜索栏
// -ProductTable //商品展示
// --ProductCategoryRow //商品类名
// --ProductRow //商品
class SearchBar extends React.Component {
  constructor(props){
    super(props)
    this.handleFileterTextChange = this.handleFileterTextChange.bind(this)
    this.handleStockedChange = this.handleStockedChange.bind(this)
  }

  handleFileterTextChange(e){
    console.log('text',e.target.value);
    
    this.props.onhandleFileterTextChange(e.target.value)
  }

  handleStockedChange(e){
    console.log('cheked',e.target.checked);
    
    this.props.onhandleStockedChange(e.target.checked)
  }

  render(){
    const {fileterText,stocked} = this.props
    return (
      <div>
        <form>
          <input 
            type='text'
            placeholder='输入商品名'
            onChange={this.handleFileterTextChange}
            value={fileterText}></input>
          <br></br>
          <input type='checkBox' onChange={this.handleStockedChange} checked={stocked}></input>
          <span>是否有库存</span>
        </form>
      </div>
    )
  }
}

function ProductCategoryRow(props){
  return (
    <tr>
      <th>
        {props.category}
      </th>
    </tr>
  )
}

function ProductRow(props){

  const name = props.product.stocked ? props.product.name : <span style={{color:'red'}}>{props.product.name}</span>
  
  return (<>
    <tr>
      <td>{name}</td>
      <td>{props.product.price}</td>
    </tr>
  </>)
}

class ProductTable extends React.Component {
  render(){
    const {fileterText,stocked} = this.props
    
    const rows = []
    let lastCategroy = null
    this.props.products.forEach((product) => {

      if(fileterText !=='' && product.name.indexOf(fileterText) === -1){
        return ;
      }
      if(stocked && !product.stocked){
        return;
      }
      if(lastCategroy !== product.category ){
        rows.push(<ProductCategoryRow key={product.category} category = {product.category}></ProductCategoryRow>)
      }
      lastCategroy = product.category
      rows.push(<ProductRow key={product.name} product = {product}></ProductRow>)
    });


    return (
      <div>
        {/* <ProductCategoryRow></ProductCategoryRow>
        <ProductRow></ProductRow> */}
        <table>
          <thead>
            <tr>
              <th>name</th>
              <th>price</th>
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>
      </div>
    )
  }
}

class FileterableProcuctTable extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      fileterText:'',
      stocked: false,
    }

    this.onhandleFileterTextChange = this.onhandleFileterTextChange.bind(this)
    this.onhandleStockedChange = this.onhandleStockedChange.bind(this)
  }

  onhandleFileterTextChange(fileterText){
    this.setState({
      fileterText:fileterText
    })
  }
  onhandleStockedChange(stocked){
    this.setState({
      stocked:stocked
    })
    
  }

  render(){
    const {products} = this.props
    const {fileterText,stocked} = this.state
  
    return (
      <div>
        <SearchBar fileterText={fileterText} stocked={stocked} onhandleFileterTextChange = {this.onhandleFileterTextChange} onhandleStockedChange={this.onhandleStockedChange}></SearchBar>
        <ProductTable products = {products} fileterText={fileterText} stocked={stocked}></ProductTable>
      </div>
    )
  }
}






const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <FileterableProcuctTable products = {PRODUCTS}/>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
